<template>
  <CPageLayout :headerConfig="headerConfig">
    <CPageTable @register="registerPage">
      <template #headerRightButton>
        <el-button
          type="primary"
          @click="handleSetEmissionFactor"
          v-btnPermission="'ECI_INVENTORY_TASK_ACCOUNT'"
        >
          <CIcon type="c-xian-peizhilie" class="g-mr4" />设置碳排放因子
        </el-button>
      </template>
      <vxe-column v-if="pageType === 'PLANT'" title="车间" min-width="100">
        <template #default="scope">
          <span>{{ empty(scope.row.department) }}</span>
        </template>
      </vxe-column>
      <vxe-column v-if="pageType === 'DAY'" title="日期" min-width="100">
        <template #default="scope">
          <span>{{ empty(scope.row.dataDate) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="电力（kWh）" min-width="100">
        <template #default="scope">
          <span>{{ empty(scope.row.electricAmt) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="天然气（m³）" min-width="100">
        <template #default="scope">
          <span>{{ empty(scope.row.gasAmt) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="水（m³）" min-width="100">
        <template #default="scope">
          <span>{{ empty(scope.row.waterAmt) }}</span>
        </template>
      </vxe-column>
      <vxe-column title="碳排放（t）" min-width="150">
        <template #default="scope">
          <span>{{ empty(scope.row.totalEmission) }}</span>
        </template>
      </vxe-column>
    </CPageTable>
    <CSetEmissionFactorDialog v-model:visible="setEmissionFactorVisible" />
  </CPageLayout>
</template>
<script lang="ts">
export default {
  name: 'MonitoringDetail'
};
</script>
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CSetEmissionFactorDialog } from '@/businessComponents/CSetEmissionFactorDialog';
import { empty } from '@/utils';
import {
  getDailyEnergyDetail,
  getPlantEnergyDetail,
  getListDepartment
} from '@/apis/taa/target/monitoring';
import { GetDetailResult } from '@/apis/taa/target/model/monitoringModel';
import { CPageLayout, CPageHeaderComplexProps } from '@/components/CPageLayout';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';

const route = useRoute();
const router = useRouter();

console.log(route, 'route', router, 'router');

const summaryNo = route.query.no as string;
const pageType = route.query.type as string;
const organizationName = route.query.name as string;
const date = route.query.date as string;

function handleRefresh() {
  console.log('handleRefresh');
  refresh();
}

/**
 * 获取车间 option
 */
// eslint-disable-next-line no-undef
const departmentOptions = ref<LabelValueOptions>([]);
async function getListDepartmentFn() {
  try {
    const res = await getListDepartment();
    departmentOptions.value =
      res?.map(item => {
        return {
          label: item,
          value: item
        };
      }) || [];
  } catch (error) {
    console.log('error', error);
    departmentOptions.value = [];
  }
}
getListDepartmentFn();

function loadData() {
  const geDetailApi = pageType === 'DAY' ? getDailyEnergyDetail : getPlantEnergyDetail;
  return geDetailApi(summaryNo).then(res => {
    if (res && res.length) {
      let result = [];
      if (pageType === 'PLANT') {
        result = departmentOptions.value.map(departmentItem => {
          const foundItem = res.find(resItem => resItem.department === departmentItem.value) || {
            department: departmentItem.value,
            electricAmt: null,
            gasAmt: null,
            waterAmt: null,
            totalEmission: null,
            totalEmissionUnit: null
          };
          return foundItem;
        });
      } else {
        result = res;
      }
      return {
        records: result,
        total: result?.length
      };
    } else {
      return {
        records: [],
        total: 0
      };
    }
  });
}

// 设置碳排放因子
const setEmissionFactorVisible = ref(false);
function handleSetEmissionFactor() {
  setEmissionFactorVisible.value = true;
}

const headerConfig = computed<CPageHeaderComplexProps>(() => {
  return {
    title: `工厂${pageType === 'DAY' ? '每日' : '车间'}数据明细 _ ${organizationName} _ ${date}`
  };
});

const options = reactive<CPageTableProps>({
  isDetailPage: true,
  isShowSearchBar: false,
  tableOptions: {
    loadData,
    pagination: false
  }
});
const [registerPage, { refresh }] = useCPageTable(options);
</script>
<style lang="scss" scoped>
.block {
  display: block;
}
:deep(.c-page-table) {
  .c-page-table__body .c-page-table__body-main.c-page-table__body-main--hide-search-bar {
    padding-top: 16px;
    padding-bottom: 60px;
  }
}
.data-status-icon {
  margin-right: 4px;
  font-size: 14px;
  color: #e1b205;
}

.task-detail-container {
  padding: 0 32px 32px;
  :deep(.el-table__header-wrapper) {
    padding: 0;
  }
  .task-detail-page-header {
    z-index: 1;
    position: relative;
    background: #fff;
    border-radius: 4px 4px 0 0;
    box-shadow: 0px 8px 8px 2px #f6f9fa;
  }
  .task-detail-subtitle-text {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #489375;
    line-height: 22px;
  }
  .task-detail-detail-popover-container {
    padding: 20px 24px;
  }
  .task-detail-list-container {
    margin-top: 20px;
    background: #fff;
    width: 100%;
    height: 400px;
    border-radius: 4px;
    .list-container-header {
      height: 56px;
      padding: 0 24px;
      border-bottom: 1px solid #ebeef5;
    }
    .list-container-body {
      padding-bottom: 24px;
      .subtask-parent-icon {
        font-size: 16px;
        color: #51596c;
      }
    }
  }
}

// 表格第一行 将原本tree的部分隐藏
:deep(.el-table) {
  .el-table__body-wrapper {
    tr td:first-child {
      .el-table__expand-icon {
        display: none !important;
      }
      .el-table__placeholder {
        display: none !important;
      }
    }
  }
}

// 新的tree的icon样式
.g-table__expand-icon {
  font-size: 12px;
  line-height: 23px;
  color: #ced4da;
  cursor: pointer;
  :deep(.icon) {
    transition: transform 0.3s;
  }
  &.g-table__expand-icon--hide {
    opacity: 0;
    cursor: default;
  }
  &.g-table__expand-icon--expanded {
    :deep(.icon) {
      transform: rotate(90deg);
    }
  }
}
:deep(.c-base-table) {
  .vxe-tree--btn-wrapper {
    top: 10px;
    .vxe-tree--node-btn {
      color: #435970 !important;
    }
  }
}
</style>
